<template>
	<view class="page_box  ">
		<u-navbar
			:is-back="true"
			title="核对订单  "
			v-if="1"
			:border-bottom="false"
			
			
		></u-navbar>

		<view class="content_box">
			<view class="cu-tag bg-red light ww100 flex justify-start">
				<text>请如实核对投保信息，以防影响正常投保!</text>
			</view>
			<view class=" pt83 pr24 pb38 pl6 flex justify-between align-center">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">订单生效日期</text>
					</view>
				</view>
				<text class="f44 text-black text-bold">2021-05-01</text>
			</view>
			<view class="h25 hen"></view>

			<view class=" pt83 pr24 pb0 pl6 flex justify-between align-center">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">险种信息</text>
					</view>
				</view>
				<view class="flex align-center">
					<text class="f50 text-black text-bold">首期保费：</text>
					<text class="f50 text-red text-bold">3594.00元</text>
				</view>
			</view>
			<view class="padding-sm">
				<t-table @change="change">
					<t-tr>
						<t-th>险种</t-th>
						<t-th>保险金额</t-th>
						<t-th>保险期限</t-th>
						<t-th>交费期限</t-th>
						<t-th>首期保费</t-th>
					</t-tr>
					<t-tr v-for="item in tableList" :key="item.id">
						<t-td>{{ item.a }}</t-td>
						<t-td>{{ item.b }}</t-td>
						<t-td>{{ item.c }}</t-td>
						<t-td>{{ item.d }}</t-td>
						<t-td>{{ item.f }}</t-td>
					</t-tr>
				</t-table>
			</view>
			<view class="flex justify-center padding-tb" @click="showPopupOne = !showPopupOne">
				<text class="bg-red round cu-tag light flex align-center cu-btn">
					保障责任明细
					<i class="cuIcon-right"></i>
				</text>
			</view>
			<view class="h25 hen"></view>
			<view class=" pt62 pr24 pb0 pl6 flex justify-between  flex-direction ">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">投保信息</text>
					</view>
				</view>
			</view>
			<view class="solid-bottom margin flex flex-direction">
				<view class="flex align-center justify-between padding-tb-xs">
					<text class="f50 text-black text-bold">投保人：张三</text>
					<i class="cuIcon-fold" @click='click' v-if='c'></i>
					<i class="cuIcon-unfold"  @click='click' v-else></i>
				</view>
				<text class="f42 text-gray padding-tb-xs">手机号：XXXXXXXXXX</text>
				<text class="f42 text-gray padding-tb-xs">身份证：XXXXXXXXXXXXXXXXXX</text>
				<block v-if="c">
					<text class="f42 text-gray padding-tb-xs">证件有效期：XXXX-XX-XX</text>
					<text class="f42 text-gray padding-tb-xs">是否长期有效：否</text>
					<text class="f42 text-gray padding-tb-xs">出生日期：XXXX-XX-XX</text>
					<text class="f42 text-gray padding-tb-xs">性别：女</text>
					<text class="f42 text-gray padding-tb-xs">职业描述：企业单位职员（内勤）</text>
					<text class="f42 text-gray padding-tb-xs">邮箱地址：XXXXXXXXX@qq.com</text>
					<text class="f42 text-gray padding-tb-xs">邮编：610000</text>
					<text class="f42 text-gray padding-tb-xs">身高:165CM</text>
					<text class="f42 text-gray padding-tb-xs">体重：53KG</text>
				</block>
				
			</view>
			<view class="solid-bottom margin flex flex-direction">
				<view class="flex align-center justify-between padding-tb-xs">
					<text class="f50 text-black text-bold">被保险人：张三</text>
					<i class="cuIcon-fold" @click='clickk' v-if='cc'></i>
					<i class="cuIcon-unfold"  @click='clickk' v-else></i>
				</view>
				<text class="f42 text-gray padding-tb-xs">手机号：XXXXXXXXXX</text>
				<text class="f42 text-gray padding-tb-xs">身份证：XXXXXXXXXXXXXXXXXX</text>
				<blcok v-if="cc">
					<text class="f42 text-gray padding-tb-xs">证件有效期：XXXX-XX-XX</text>
					<text class="f42 text-gray padding-tb-xs">是否长期有效：否</text>
					<text class="f42 text-gray padding-tb-xs">出生日期：XXXX-XX-XX</text>
					<text class="f42 text-gray padding-tb-xs">性别：女</text>
					<text class="f42 text-gray padding-tb-xs">职业描述：企业单位职员（内勤）</text>
					<text class="f42 text-gray padding-tb-xs">邮箱地址：XXXXXXXXX@qq.com</text>
					<text class="f42 text-gray padding-tb-xs">邮编：610000</text>
					<text class="f42 text-gray padding-tb-xs">身高:165CM</text>
					<text class="f42 text-gray padding-tb-xs">体重：53KG</text>
				</blcok>
			</view>
			<view class="padding-bottom padding-lr"><text class="f50 text-black text-bold">被保险人：张三</text></view>
			<view class="h25 hen"></view>
			<view class=" pt62 pr24 pb0 pl6 flex justify-between  flex-direction ">
				<view class="flex align-center">
					<text class="block w14 h49 bg-red"></text>
					<view class=" ml30 flex flex-direction ww100">
						<text class="f50 text-black text-bold">续期交费账户信息</text>
					</view>
				</view>
			</view>
			<view class="padding">
				<image
					class="ww100 h392"
					src="https://i.loli.net/2021/06/06/a3FQGXDKJrWvtVe.png"
					mode="aspectFill"
				></image>
			</view>
			<view class="padding flex justify-between">
				<view class="flex align-center">
					<view class="flex flex-direction align-center justify-center mr90">
						<image class="w71 h52" src="../../static/fx.png" mode="aspectFill"></image>
						<text class="f40 text-gray">分享</text>
					</view>
					<view class="flex align-center">
						<text class="f42 text-black text-bold">保费</text>
						<text class="f42 text-red text-bold ml30">46.20元起</text>
					</view>
				</view>
				<view class="flex">
					<button
						class="w422 h136 bg-red flex align-center justify-center text-bold round ml30"
						@click="l.to('')"
					>
						提交订单
					</button>
				</view>
			</view>
		</view>
		<!-- 保障责任明细 -->
		<u-popup v-model="showPopupOne" mode="bottom" border-radius="14" length="80%" :closeable="true">
			<view class="box  flex flex-direction  ">
				<text class="text-bold text-black f53 padding-tb text-center ">保障责任明细</text>
				<text class="cu-tag bg-red light ww100 flex justify-start">此描述仅供参考，具体以保单合同为准</text>
				<view class=" pt62 pr24 pb0 pl6 flex justify-between  flex-direction ">
					<view class="flex align-center">
						<text class="block w14 h49 bg-red"></text>
						<view class=" ml30 flex flex-direction ww100">
							<text class="f50 text-black text-bold">张三</text>
						</view>
					</view>
				</view>
				
				<scroll-view scroll-y="true" class="scroll-y" >
					<view class="padding-lr">
						<view class="flex justify-between solid-bottom padding-tb-sm">
							<text class="f42 ">105种重疾疾病保险金</text>
							<text class="f42 ">30万元</text>
						</view>
						<view class="flex justify-between solid-bottom padding-tb-sm">
							<text class="f42 ">重大疾病关爱保险金</text>
							<text class="f42 ">额外30万元</text>
						</view>
						<view class="flex justify-between solid-bottom padding-tb-sm">
							<text class="f42 ">6种轻症疾病保险金</text>
							<text class="f42 ">9万元*2次</text>
						</view>
						<view class="flex justify-between solid-bottom padding-tb-sm">
							<text class="f42 ">22种中症疾病保险金</text>
							<text class="f42 ">1 8万元*2次</text>
						</view>
						<view class="flex justify-between solid-bottom padding-tb-sm">
							<text class="f42 ">25种特疾疾病保险金</text>
							<text class="f42 ">13.5万元*2次</text>
						</view>
						<view class="flex justify-between solid-bottom padding-tb-sm">
							<text class="f42 ">脑中风长期护理保险金</text>
							<text class="f42 ">每年3万元，最多</text>
						</view>
						
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
export default {
	components: {
		tTable,
		tTh,
		tTr,
		tTd
	},
	data() {
		return {
			showPopupOne: false,
			tableList: [
				{
					a: '复星联合阿童沐1号重大疾病保险计划',
					b: '30万元',
					c: '终身',
					d: '30年交',
					f: '3594元'
				}
			],
			field: {
				backgroundColor: '#000'
			},
			c:false,
			cc:false,
		};
	},
	onShow() {},
	onLoad(e) {},
	methods: {
		async click(e){
			 this.c= !this.c
		},
		async clickk(){
			 this.cc= !this.cc
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	.content_box {
	}
	.scroll-y {
		// background-color: red;
		height: 62vh;
	}
}
</style>
